Add background colors to comments

Hi all,

This is a quick & dirty or a simple hack (if you want to call it that) that allows one to add a background color to the comments. I have this set in my blog and you can simply check the post page for one of my posts that has comments to see what I am talking about. Here is an image for your convenience:


Interested? Please backup your template before proceeding with this hack.

In this hack you can assign a different background color (and text color) for the blog author’s comments (see the image above) and to do this you must have this Hack (Author comment highlighting) from Hackosphere installed.

Once you install the author comment highlighting hack from Hackosphere, your comment code will look similar to this:

/* Comments
----------------------------------------------- */
#comments {
 margin:0;
 }
#comments h4 {
 margin:0 0 10px;
 border-top:1px dotted $borderColor;
 padding-top:.5em;
 line-height: 1.4em;
 font: bold 110% Georgia,Serif;
 color:#333;
 }
#comments-block {
 line-height:1.6em;
 }
.comment-author {
 background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
 margin:.5em 0 0;
 padding:0 0 0 20px;
 font-weight:bold;
 }
.comment-body {
 margin:0;
 padding:0 0 0 20px;
 }
.comment-body p {
 margin:0 0 .5em;
 }
.comment-body-author {
 margin:0;
 padding:0px 0px 0px 20px;
}
.comment-body-author p {
 font-size:100%;
 margin:0 0 .2em 0;
 color:#000000;
 text-decoration:bold;
}
.comment-footer {
 margin:0 0 .5em;
 padding:0 0 .75em 20px;
 color:#996;
 }
.comment-footer a:link {
 color:#996;
 }
.deleted-comment {
 font-style:italic;
 color:gray;
 }

Now check out this modified code. As the comment section CSS may differ across various templates, do not copy-paste the entire code. Understand and pick up the changes shown in italic-bold (and annotated for reference). Also Checkout the image below to see what I mean by comment header, comment body and comment footer in my annotations.

/* Comments
----------------------------------------------- */
#comments {
 margin:0;
 }
#comments h4 {
 margin:0 0 10px;
 border-top:1px dotted #99bb99;
 padding-top:.5em;
 line-height: 1.4em;
 font: bold 110% Georgia,Serif;
 color:#333;
 }
#comments-block {
 line-height:1.6em;
 }
.comment-author {
 background:#CCFFCC /*comment header background color (comment author name)*/
url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
 margin:.5em 0 0;
 padding:0 0 0 20px;
 font-weight:bold;
 }
.comment-body {
 background:#99FFFF; /*Reader comment background color*/
 margin:0;
 padding:7px 7px 7px 7px; /*Modified padding values*/
 }
.comment-body p {
 margin:0 0 .5em;
 }
.comment-body-author {
 background:#cccccc; /*The author comments background color.*/
 margin:0;
 padding:7px 7px 7px 10px; /*Modified padding values*/
}
.comment-body-author p {
 font-size:105%;
 margin:0 0 .2em 0;
 color:#6728B2; /*The author comments text color.*/
 text-decoration:bold;
}
.comment-footer {
 background:#CCFFCC; /*Comment footer background color (comment permalink)*/
 margin:0 0 .5em;
 padding:0 0 .75em 20px;
 color:#996;
 }
.comment-footer a:link {
 color:#996;
 }
.deleted-comment {
 font-style:italic;
 color:gray;
 }

To pick up color hex values that suit your blog you can refer to this link. This is a simple tutorial on how to modify your comment section. You can add a whole lot of CSS to make it look better. Do drop a line here if you are able to create anything good looking based on these lines.